﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户信息管理</title>
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="../../assets/module/admin.css?v=318" />
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 表格工具栏 -->
                <form class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名:</label>
                            <div class="layui-input-inline">
                                <input name="nickname" class="layui-input" placeholder="输入用户名" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">性&emsp;别:</label>
                            <div class="layui-input-inline">
                                <select name="gender">
                                    <option value="">选择性别</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">&emsp;
                            <button class="layui-btn icon-btn" lay-filter="userTbSearch" lay-submit>
                                <i class="layui-icon">&#xe615;</i>搜索
                            </button>
                        </div>
                    </div>
                </form>
                <!-- 数据表格 -->
                <table id="userTable" lay-filter="userTable"></table>
            </div>
        </div>
    </div>

    <!-- 表格操作列 -->
    <script type="text/html" id="userTbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
</script>
    <!-- 表单弹窗 -->
    <script type="text/html" id="userEditDialog">
    <form id="userEditForm" lay-filter="userEditForm" class="layui-form model-form">
        <input name="useruid" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">用户名:</label>
            <div class="layui-input-block">
                <input name="nickname" placeholder="请输入用户名" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">性别:</label>
            <div class="layui-input-block">
                <select name="gender" placeholder="请选择性别" class="layui-input"
                       lay-verType="tips" lay-verify="required" required>
                       <option value="">选择性别</option>
                       <option value="男">男</option>
                       <option value="女">女</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">位置:</label>
            <div class="layui-input-block">
                <input id="CitySel" name="location" class="layui-input" placeholder="请选择城市" data-toggle="city-picker"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日:</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="birthday" name="birthday" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注:</label>
            <div class="layui-input-block">
                <textarea name="bio" placeholder="请输入备注" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="userEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>
    <!-- js部分 -->
    <script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="../../assets/js/common.js?v=318"></script>
    <script>
        layui.use(['layer', 'form', 'table', 'util', 'admin', 'zTree', 'laydate'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var util = layui.util;
            var admin = layui.admin;
            var laydate = layui.laydate;

            /* 渲染表格 */
            var insTb = table.render({
                elem: '#userTable',
                url: 'http://169.254.202.137:8080/GetUser',
                toolbar: ['<p>',
                    '</p>'].join(''),
                cellMinWidth: 100,
                cols: [[
                    { type: 'checkbox' },
                    { type: 'numbers' },
                    { field: 'nickname', title: '用户名', sort: true },
                    { field: 'gender', title: '性别', sort: true },
                    { field: 'location', title: '位置', sort: true },
                    {
                        field: 'birthday', title: '生日', templet: function (d) {
                            if (d.birthday == null)
                                return '';
                            // 通过上架日期，实例化日期对象
                            let year = d.birthday.year;

                            let month = d.birthday.month;
                            month = month < 10 ? '0' + month : month;

                            let day = d.birthday.day;
                            day = day < 10 ? '0' + day : day;

                            return year + "-" + month + "-" + day;
                        }, sort: true
                    },
                    { field: 'bio', title: '简介', sort: true },
                    { title: '操作', toolbar: '#userTbBar', align: 'center', width: 200, minWidth: 200 }
                ]],

                parseData: function (res) {
                    return {
                        "code": res.code == 200 ? 0 : res.code,
                        "data": res.data,
                        "count": res.count
                    }
                },

                page: true,

                limit: 10,
                limits: [10, 20, 30]
            });

            /* 表格搜索 */
            form.on('submit(userTbSearch)', function (data) {
                insTb.reload({ where: data.field, page: { curr: 1 } });
                return false;
            });

            /* 表格工具条点击事件 */
            table.on('tool(userTable)', function (obj) {
                if (obj.event === 'edit') { // 修改
                    showEditModel(obj.data);
                }
            });

            /* 表格头工具栏点击事件 */
            table.on('toolbar(userTable)', function (obj) {
                if (obj.event === 'add') { // 添加
                    showEditModel();
                }
            });

            /* 显示表单弹窗 */
            function showEditModel(mData) {
                let citypicker;
                let CitySel;
                admin.open({
                    area: '700px',
                    type: 1,
                    title: '修改用户信息',
                    content: $('#userEditDialog').html(),
                    success: function (layero, dIndex) {
                        layui.use('citypicker', function () {
                            citypicker = layui.citypicker;
                            CitySel = layero.find('#CitySel')[0];
                        })

                        // 渲染
                        laydate.render({
                            elem: '#birthday'
                        });
                        // 回显表单数据
                        form.val('userEditForm', mData);
                        $("#birthday").val('');
                        // 表单提交事件
                        form.on('submit(userEditSubmit)', function (data) {
                            var loadIndex = layer.load(2);
                            $.ajax({
                                url: 'http://169.254.202.137:8080/UpdateUserInfo',
                                type: 'Get',
                                dataType: 'json',
                                contentType: 'application/json;charset=utf-8',
                                data: data.field,
                                success: function (res) {
                                    layer.close(loadIndex);
                                    if (res.code === 200) {
                                        layer.close(dIndex);
                                        layer.msg(res.msg, { icon: 1 });
                                        insTb.reload({ page: { curr: 1 } });
                                    } else {
                                        layer.msg(res.msg, { icon: 2 });
                                    }
                                },
                            })
                            return false;
                        });
                    },
                    end: function () {
                        if (citypicker) {
                            citypicker = null;
                        }
                        if (CitySel) {
                            CitySel = null;
                        }
                    }
                });
            }
        });
    </script>
</body>

</html>